<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drawingboard</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background: linear-gradient(to right, #0ED2F7, #B2FEFA);
        }
        
        li {
            list-style: none;
        }
        
        li:hover {
            cursor: pointer;
        }
        
        .drawingboard_container {
            width: 900px;
            margin: 50px auto;
            background-color: rgb(192, 192, 192);
        }
        
        .menu {
            height: 35px;
            position: relative;
        }
        
        .firstul>li {
            position: relative;
            box-sizing: border-box;
            float: left;
            padding: 0 15px;
            font-size: 18px;
            line-height: 35px;
            height: 35px;
        }
        
        .secondul {
            position: absolute;
            z-index: 999;
            top: 34px;
            left: -10px;
            display: none;
        }
        
        .secondul li {
            width: 80px;
            text-align: center;
            border-bottom: 1px solid black;
            background-color: grey;
        }
        
        .firstul>li:hover {
            background-color: grey;
        }
        
        .firstul>li:hover>.secondul {
            display: block;
        }
        
        .secondul li:hover {
            color: orange;
        }
        
        .open_file_btn {
            position: relative;
        }
        
        #open_file_input {
            position: absolute;
            top: 0;
            left: 0;
            width: 85px;
            height: 35px;
            opacity: 0;
        }
        
        #save_href {
            text-decoration: none;
            color: black;
        }
        
        #save_href:hover {
            color: orange;
        }
        
        .main {
            position: relative;
            height: 490px;
            border-bottom: 2px solid gray;
        }
        
        .about_drawing_board {
            position: absolute;
            display: none;
            top: 30px;
            left: 200px;
            width: 500px;
            height: 300px;
            border-radius: 20px;
            background-color: rgb(192, 192, 192);
            z-index: 9999;
        }
        
        .about_drawing_board p {
            text-align: center;
            font-size: 25px;
            line-height: 1.8em;
        }
        
        .about_drawing_board button {
            font-size: 25px;
            width: 180px;
            height: 50px;
            margin-top: 10px;
            margin-left: 160px;
            border-radius: 25px;
            cursor: pointer;
        }
        
        .tool_bar_section {
            position: relative;
            top: 0;
            left: 5px;
            width: 56px;
            height: 200px;
        }
        
        .tools {
            border-left: 2px solid white;
            border-top: 2px solid white;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            float: left;
            width: 24px;
            height: 24px;
            background-image: url(./images/tool_bar.png);
        }
        
        .pen_width_section {
            position: absolute;
            top: 222px;
            left: 10px;
            border: 1px solid black;
            border-right-color: white;
            border-bottom-color: white;
            width: 40px;
            height: 85px;
        }
        
        .pen_width_section li {
            position: relative;
            height: 17px;
        }
        
        .pen_width_section li:first-child {
            background-color: rgb(0, 1, 122);
        }
        
        .pen_width_section li div {
            position: absolute;
            left: 5px;
            top: 35%;
            width: 30px;
            background-color: black;
        }
        
        .pen_width_thinnest {
            height: 2px;
        }
        
        .pen_width_thin {
            height: 3px;
        }
        
        .pen_width_normal {
            height: 4px;
        }
        
        .pen_width_thick {
            height: 5px;
        }
        
        .pen_width_thickest {
            height: 6px;
        }
        
        #prev_action_btn,
        #next_action_btn {
            position: absolute;
            width: 26px;
            height: 30px;
            top: 3px;
            left: 280px;
            background-image: url(./images/prev.png);
            background-repeat: no-repeat;
            background-position: center;
        }
        
        #next_action_btn {
            left: 310px;
            background-image: url(./images/next.png);
        }
        
        #prev_action_btn:hover,
        #next_action_btn:hover {
            cursor: pointer;
            background-color: gray;
        }
        
        .canvas_section {
            position: absolute;
            left: 70px;
            top: 0;
            width: 829px;
            height: 410px;
            background-color: gray;
            box-sizing: border-box;
            padding: 5px;
        }
        
        .canvas_div {
            position: relative;
            width: 760px;
            height: 380px;
            background-color: white;
        }
        
        #textarea {
            position: absolute;
            display: none;
            opacity: 0.2;
            cursor: text;
        }
        
        .color_board_section {
            position: absolute;
            bottom: 5px;
            left: 4px;
            width: 440px;
            height: 60px;
        }
        
        .using_color_section {
            float: left;
            position: relative;
            width: 50px;
            height: 50px;
            background-color: rgb(223, 223, 223);
            border: 2px solid gray;
            border-right-color: white;
            border-bottom-color: white;
        }
        
        .using_color_section div {
            position: absolute;
            width: 25px;
            height: 25px;
            box-sizing: border-box;
            border: 2px solid rgb(122, 122, 122);
        }
        
        .using_color_one {
            top: 5px;
            left: 5px;
            background-color: black;
            z-index: 999;
        }
        
        .using_color_two {
            bottom: 5px;
            right: 5px;
            background-color: white;
        }
        
        .colors {
            float: left;
            width: 380px;
            height: 60px;
            margin-left: 2px;
            margin-top: 2px;
        }
        
        .colors li {
            float: left;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            margin-left: 2px;
            margin-bottom: 2px;
            border: 2px solid black;
            border-right-width: 1px;
            border-bottom-width: 1px;
        }
        
        .banner {
            margin-top: 2px;
            height: 30px;
            line-height: 30px;
            border-top: 2px solid gray;
        }
    </style>
    <script src="./index.js"></script>
</head>

<body>
    <div class="drawingboard_container">

        <div class="menu">
            <ul class="firstul">
                <li>文件
                    <ul class="secondul">
                        <li class="new_file_btn">新建</li>
                        <li class="open_file_btn"><input type="file" name="" id="open_file_input" multiple="multiple" accept="image/*">打开</li>
                        <li class="save_file_btn"><a href="" id="save_href" download="canvas.png">保存</a></li>
                    </ul>
                </li>
                <li>编辑
                    <ul class="secondul">
                        <li class="restore_file_btn">撤销</li>
                        <li class="clear_file_btn">清空</li>
                    </ul>
                </li>
                <li>视图
                    <ul class="secondul">
                        <li class="tool_bar_btn">工具栏</li>
                        <li class="color_board_btn">色板</li>
                        <li class="status_board_btn">状态栏</li>
                    </ul>
                </li>
                <li>帮助
                    <ul class="secondul">
                        <li class="about_board_btn">关于画板</li>
                    </ul>
                </li>
            </ul>
            <div id="prev_action_btn"></div>
            <div id="next_action_btn"></div>
        </div>

        <div class="main">
            <div class="about_drawing_board">
                <p>author：wjy</p>
                <p>version：1.0.0</p>
                <p>updateTime：2021/8/5</p>
                <p>canvas：760*380(px)</p>
                <p>feedbackToQQ：2741475985</p>
                <button id="close_information_btn">CLOSE</button>
            </div>
            <div class="tool_bar_section">
                <div class="tools"></div>
                <div class="tools" id="tools_dotted_rectange"></div>
                <div class="tools" id="tools_eraser"></div>
                <div class="tools"></div>
                <div class="tools"></div>
                <div class="tools"></div>
                <div class="tools" id="tools_pencil"></div>
                <div class="tools"></div>
                <div class="tools"></div>
                <div class="tools" id="tools_text"></div>
                <div class="tools" id="tools_straight_line"></div>
                <div class="tools"></div>
                <div class="tools" id="tools_solid_rectange"></div>
                <div class="tools"></div>
                <div class="tools" id="tools_circle"></div>
                <div class="tools"></div>
            </div>
            <ul class="pen_width_section">
                <li>
                    <div class="pen_width_thinnest"></div>
                </li>
                <li>
                    <div class="pen_width_thin"></div>
                </li>
                <li>
                    <div class="pen_width_normal"></div>
                </li>
                <li>
                    <div class="pen_width_thick"></div>
                </li>
                <li>
                    <div class="pen_width_thickest"></div>
                </li>
            </ul>
            <div class="canvas_section">
                <div class="canvas_div">
                    <textarea name="" id="textarea"></textarea>
                    <canvas id="mycanvas" width="760" height="380"></canvas>
                </div>
            </div>
            <div class="color_board_section">
                <div class="using_color_section">
                    <div class="using_color_one"></div>
                    <div class="using_color_two"></div>
                </div>
                <ul class="colors">
                    <li style="background-color: rgb(0, 0, 0);"></li>
                    <li style="background-color: rgb(120, 120, 120);"></li>
                    <li style="background-color: rgb(135, 0, 0);"></li>
                    <li style="background-color: rgb(117, 122, 12);"></li>
                    <li style="background-color: rgb(0, 123, 25);"></li>
                    <li style="background-color: rgb(0,121,122);"></li>
                    <li style="background-color: rgb(2, 0, 119);"></li>
                    <li style="background-color: rgb(137, 0, 116);"></li>
                    <li style="background-color: rgb(118, 122, 58);"></li>
                    <li style="background-color: rgb(0, 55, 56);"></li>
                    <li style="background-color: rgb(0, 113, 253);"></li>
                    <li style="background-color: rgb(0, 50, 120);"></li>
                    <li style="background-color: rgb(77, 0, 252);"></li>
                    <li style="background-color: rgb(131, 55, 0);"></li>
                    <li style="background-color: rgb(255, 255, 255);"></li>
                    <li style="background-color: rgb(187, 187, 187);"></li>
                    <li style="background-color: rgb(255, 0, 0);"></li>
                    <li style="background-color: rgb(251, 255, 36);"></li>
                    <li style="background-color: rgb(0, 255, 64);"></li>
                    <li style="background-color: rgb(0, 255, 255);"></li>
                    <li style="background-color: rgb(45, 0, 252);"></li>
                    <li style="background-color: rgb(255, 0, 249);"></li>
                    <li style="background-color: rgb(252, 255, 126);"></li>
                    <li style="background-color: rgb(0, 255, 135);"></li>
                    <li style="background-color: rgb(0, 255, 255);"></li>
                    <li style="background-color: rgb(131, 112, 252);"></li>
                    <li style="background-color: rgb(255, 0, 107);"></li>
                    <li style="background-color: rgb(255, 116, 28);"></li>
                </ul>
            </div>
        </div>
        <div class="banner">For Help,click Help Topics on the Help Menu.</div>
    </div>
</body>

</html>